<template>
	<div>
		<el-dialog :fullscreen="state.isFullScreen" v-model="state.isShowDialog"  center class="borderRadius10" :show-close="false" width="1280">
			<template #header>
				<div class="flex" style="justify-content: space-between;align-items: center;">
					<div class="" style="flex:1">&nbsp</div>
					<p class="font16" style="font-weight: bold; flex:3">某某门店员工经营报表</p>
					<div class=" flex" style="justify-content: flex-end;align-items: center; flex:1">
						<el-icon class="ml10 font16" style="color:var(--el-color-info);cursor: pointer;"><ele-Download /></el-icon>
						<el-icon @click="fullScreen" class="ml10" style="color:var(--el-color-info);cursor: pointer;">
							<SvgIcon v-if="!state.isFullScreen" class="font16" name="iconfont icon-fullscreen" />
							<SvgIcon v-else class="font16" name="iconfont icon-tuichuquanping" />
						</el-icon>
						<el-icon @click="closeDialog" class="ml10 font16" style="color:var(--el-color-info);cursor: pointer;"><ele-Close /></el-icon>
					</div>
				</div>
			</template>
            <section class="dialogBox">
				<AlertBox msg="总综合业绩：15010 元； 总销售业绩：6974 元；总储值卡业绩； 总充值业绩：8000 元； 总还款业绩：36 元； 总退款业绩：0。" />
				<el-table :data="state.goodsTableData" style="width: 100%;">
					<el-table-column label="ID" width="90px">
						<template #default="scope">
							<span>ID</span>
						</template>
					</el-table-column>
					<el-table-column label="姓名" width="90px">
						<template #default="scope">
							<span>姓名</span>
						</template>
					</el-table-column>
					<el-table-column label="职位" width="90px">
						<template #default="scope">
							<span>店长/其他</span>
						</template>
					</el-table-column>
					<el-table-column label="状态" width="90px">
						<template #default="scope">
							<span>在职/离职</span>
						</template>
					</el-table-column>
					<el-table-column sortable label="订单业绩">
						<template #default="scope">
							<span>例：889.88</span>
						</template>
					</el-table-column>
					<el-table-column sortable label="实付业绩">
						<template #default="scope">
							<span>例：889.88</span>
						</template>
					</el-table-column>
					<el-table-column sortable label="充值业绩">
						<template #default="scope">
							<span>例：889.88</span>
						</template>
					</el-table-column>
					
					<el-table-column sortable label="还款业绩">
						<template #default="scope">
							<span>例：889.88</span>
						</template>
					</el-table-column>
					<el-table-column sortable label="退款业绩">
						<template #default="scope">
							<span>例：889.88</span>
						</template>
					</el-table-column>
					<el-table-column sortable label="退款业绩">
						<template #default="scope">
							<span>例：889.88</span>
						</template>
					</el-table-column>
					<el-table-column label="操作" width="90px">
						<template #default="scope">
							<el-button text type="primary" @click="onOpenEditRole()">
								详情
							</el-button>
						</template>
					</el-table-column>
					<template #empty>
						<el-empty description="暂无数据" />
					</template>
				</el-table>
				<el-row justify="end">
					<el-col :span="24" class="flex-end-center">
						<el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
							:pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="state.param.pageNum" background
							v-model:page-size="state.param.pageSize" layout="total, sizes, prev, pager, next, jumper"
							:total="state.total">
						</el-pagination>
					</el-col>
				</el-row>
			</section>
		</el-dialog>
        <performanceOrdersListDialog ref="performanceOrdersListDialogRef" />
	</div>
</template>

<script setup lang="ts" name="cropper">
import { reactive, nextTick, ref,defineAsyncComponent } from 'vue';
import { useRouter } from 'vue-router';
import { productList } from '/@/api/commodity';

// 引入组件
const performanceOrdersListDialog = defineAsyncComponent(() => import('/@/views/statistical/operating/components/performanceOrdersListDialog.vue'));



const router = useRouter();
// 定义变量内容
const performanceOrdersListDialogRef = ref();
// 定义变量内容
const state = reactive({
	isShowDialog: false,
	isFullScreen: false,
	cropperImgBase64: '',
    param: {
		keyword: "",
		pageNum: 1,
		pageSize: 10,  
	},
    total: 0,
    goodsTableData:[],
});

// 打开弹窗
const openDialog = () => {
	state.isShowDialog = true;
	nextTick(() => {
		getGoodsList();
	});
};

// 切换放大缩小
const fullScreen = () => {
	state.isFullScreen = !state.isFullScreen;
};
// 关闭弹窗
const closeDialog = () => {
	state.isShowDialog = false;
};
const onOpenEditRole = () => {
	performanceOrdersListDialogRef.value.openDialog();
};
// 更换
const getGoodsList = async() => {
    state.loading = true;
	const { results } = await productList(state.param);
	state.loading = false;
	state.goodsTableData = results.records;
	state.total = results.total;
};

// 分页点击条数
const onHandleSizeChange = (val: number) => {
	state.param.pageSize = val;
    getGoodsList();
};
// 分页点击
const onHandleCurrentChange = (val: number) => {
	state.param.pageNum = val;
    getGoodsList();
}

// 暴露变量
defineExpose({
	openDialog,
});
</script>
<style scoped lang="scss">
:deep(.el-overlay){
	.el-overlay-dialog .el-dialog .el-dialog__body{
		padding-top: 10px !important;
	}
}
:deep(.el-table){
	flex: 1;
	.el-table__inner-wrapper::before{
		background: none !important;
	}
}

// // 非全屏模式下
// :deep(.el-dialog){
// 	display: flex;
//     flex-direction: column;
// 	.el-dialog__body{
// 		display:flex;
// 		flex-direction:column;
// 		height: inherit;
// 		flex:1;
// 		.dialogBox{
// 			display:flex;
// 			flex-direction:column;
// 			flex:1;
// 			height: inherit;
// 			.el-table{
// 				flex: 1;
// 			}
// 		}
// 	}
// }


// 全屏模式下样式
:deep(.is-fullscreen){
	display:flex;
	flex-direction:column;
	max-height:100vh;
	.el-dialog__body{
		display:flex;
		flex-direction:column;
		height: inherit;
		flex:1;
		max-height: none !important;
		.dialogBox{
			display:flex;
			flex-direction:column;
			flex:1;
			height: inherit;
			.el-table{
				flex:1;
			}
		}
	}
}

</style>
